<template>
  <div class="packages">
    <div  >
      <el-form :model="queryParams" ref="queryForm" style="margin-top: 10px;" label-width="68px" :inline="true">
      <el-form-item label="录入时间">
        <el-date-picker v-model="entryRange" style="width: 230px;" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" ></el-date-picker>
      </el-form-item>
      <el-form-item label="登记日期">
        <el-date-picker v-model="dateRange" style="width: 370px;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
          range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions"></el-date-picker>
      </el-form-item>

      <el-form-item label="条码号" prop="barcodeCode">
        <el-input v-model="queryParams.barcodeCode" placeholder="请输入条码号" clearable style="width: 230px;"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="关键字" prop="keyword">
        <el-input v-model="queryParams.keyword" placeholder="送检单位/送检姓名" clearable style="width: 230px;"
          @keyup.enter.native="handleQuery" />
      </el-form-item>


      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
    
    <div style="position: relative;padding-bottom: 80px;">

      <el-table highlight-current-row :data="baseList" @row-click="handleClick" style="width: 100%" stripe border
        @selection-change="handleSelectionChange" height="350" :header-cell-style="{
          background: '#ebebeb'
        }">
        <af-table-column align="center" type="index" width="50" label="序号"></af-table-column>
        <af-table-column align="center" prop="barcodeCode" label="条码号" width="120">
        </af-table-column>
        <af-table-column align="center" prop="projectTypeName" width="350" label="项目类型">
        </af-table-column>
        <af-table-column align="center" prop="entryDate" label="录入时间" width="160"></af-table-column>
        <af-table-column align="center" prop="submitName" label="送检姓名"></af-table-column>
        <af-table-column align="center" prop="inspectionUnit" label="送检单位"></af-table-column>
        <af-table-column align="center" prop="professionalGroupName" label="专业组">
        </af-table-column>
        <af-table-column align="center" prop="registerPerson" label="登记人"></af-table-column>
        <af-table-column align="center" prop="registrationTime" label="登记时间" width="160"> </af-table-column>
        <af-table-column align="center" prop="additionType" label="是否系统新增" width="120">
          <template slot-scope="scope">{{ scope.row.additionType == 0 ? 'LRP导入' : '系统新增' }}</template>
        </af-table-column>

      </el-table>
      <!-- <div style='height:80px'></div> -->

      <div class="paginationClass">
        <pagination   :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>

    </div>


    <hr />
    <div class="vp-tite">
      <span style="font-size: 17.5px; font-weight: bold">LRP录入数据</span>
    </div>
    <div class="container">

      <div class="aside2">
        <el-form :model="lrpForm" label-width="80px" class="demo-ruleForm" size="mini">

          <el-col :span="12">
            <el-form-item label="条码号" prop="barcodeCode">
              <el-input v-model="lrpForm.barcodeCode" :disabled="addShow" @keyup.enter.native="handleAdd"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业组" prop="professionalGroupName">
              <el-input v-model="lrpForm.professionalGroupName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目类型" prop="projectTypeName">
              <el-input v-model="lrpForm.projectTypeName" style="margin-bottom: 10px;" disabled></el-input>
              <el-input v-model="lrpForm.projectTypeName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="样本类型" prop="sampleTypeName">
              <el-input v-model="lrpForm.sampleTypeName" style="margin-bottom: 10px;" disabled></el-input>
              <el-input v-model="lrpForm.sampleTypeName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="送检单位" prop="inspectionUnit">
              <el-input v-model="lrpForm.inspectionUnit" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="送检名称" prop="submitName">
              <el-input v-model="lrpForm.submitName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-input v-model="sexName[lrpForm.sex]" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="lrpForm.age" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="lrpForm.phone" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合作单位" prop="cooperation">
              <el-input v-model="lrpForm.cooperation" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采样日期" prop="collectorTime">
              <el-input v-model="lrpForm.collectorTime" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请日期" prop="applyDate">
              <el-input v-model="lrpForm.applyDate" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录单人" prop="recordName">
              <el-input v-model="lrpForm.recordName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录单日期" prop="recordTime">
              <el-input v-model="lrpForm.recordTime" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="lrpForm.remark" disabled type="textarea"></el-input>
            </el-form-item>
          </el-col>


        </el-form>
      </div>
      <div class="middle">
        <el-button type="primary" icon="el-icon-right" circle @click="transfer"></el-button>
      </div>
      <div class="main2">
        <el-form :model="baseForm" label-width="80px" class="demo-ruleForm" size="mini">

          <el-col :span="12">
            <el-form-item label="条码号" prop="barcodeCode">
              <el-input v-model="baseForm.barcodeCode" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业组" prop="professionalGroupName">
              <el-input v-model="baseForm.professionalGroupName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目类型" prop="projectTypeName">
              <el-input v-model="baseForm.projectTypeName" style="margin-bottom: 10px;" disabled></el-input>
              <el-input v-model="baseForm.projectTypeName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="样本类型" prop="sampleTypeName">
              <el-input v-model="baseForm.sampleTypeName" style="margin-bottom: 10px;" disabled></el-input>
              <el-input v-model="baseForm.sampleTypeName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="送检单位" prop="inspectionUnit">
              <el-input v-model="baseForm.inspectionUnit" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="送检名称" prop="submitName">
              <el-input v-model="baseForm.submitName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-input v-model="sexName[baseForm.sex]" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="baseForm.age" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="baseForm.phone" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合作单位" prop="cooperation">
              <el-input v-model="baseForm.cooperation" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采样日期" prop="collectorTime">
              <el-input v-model="baseForm.collectorTime" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请日期" prop="applyDate">
              <el-input v-model="baseForm.applyDate" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录单人" prop="recordName">
              <el-input v-model="baseForm.recordName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录单日期" prop="recordTime">
              <el-input v-model="baseForm.recordTime" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="baseForm.remark" disabled type="textarea"></el-input>
            </el-form-item>
          </el-col>


        </el-form>
      </div>

    </div>
    <div>
      
      <el-button type="primary" @click="confirm" style="float: right">确认修改</el-button>
      <!-- <el-button type="primary" @click="submit" style="float: right;margin-right:20px">提交</el-button> -->
      <el-button type="primary" @click="add" style="float: right;margin-right:20px">新增</el-button>
    </div>
  </div>

</template>

<script>
import {
  based,
  getLrpData,
  lrpCompare
} from "@/api/auxiliary/assistManagement/base"
import {
  submitLRP,
  getLRPbyCode
} from "@/api/technologyManage/index.js";
export default {
  name: "compareInformation",
  data () {
    return {
      pickerOptions: {
        disabledDate(time){
          return time.getTime()>Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      total: 0,
      // 登记日期范围
      dateRange: [],
      // 录入时间范围
      entryRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        barcodeCode: undefined,
        keyword: undefined
      },
      //对照id
      changeId: '',
      // 基本信息数据
      baseForm: {},
      lrpForm: {},
      baseList: [],
      sexName: {
        1: '男',
        2: '女',
        3: '未知'
      },
      addShow:true,
      keyList:[]
    }
  },
  created () {
    // this.dateRange[0] = this.parseTime((new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000))
    // this.dateRange[1] = this.parseTime(new Date(new Date().toLocaleDateString()).getTime())
    // this.entryRange[0] = this.parseTime(new Date((new Date).getTime() - 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
    // this.entryRange[1] = this.parseTime(new Date(new Date).getTime(), '{y}-{m}-{d}')
    this.dateRange[0] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime() 
    );
    this.dateRange[1] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime() - 1000+ 24 * 60 * 60 * 1000
    );
    this.entryRange[0] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime()
    );
    this.entryRange[1] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime() - 1000+ 24 * 60 * 60 * 1000
    );
    this.getList()
  },
  methods: {
    add(){
      this.baseForm={},
      this.lrpForm={},
      this.addShow=false
    },
    handleAdd(){
      // this.$message('123')
     getLRPbyCode({ barcodeCode: this.lrpForm.barcodeCode }).then(res => {
        console.log(res);
        this.lrpForm=res.data[0]
        this.keyList=[]
        this.keyList.push(res.data[0].key)
    })
  },
    submit() {
     
      submitLRP({ key: this.keyList }).then(() => {
        // dialogVisible4 = false;
        this.$message.success("提交成功");
        this.add()
        this.addShow=true
      });
      // this.dialogVisible4 = false;
      // this.LRP_tableData = [];
      // this.local_tableData = [];
      // this.getList();
    },
    /** 查询基本信息列表 */
    getList () {
      based(this.addParameter(this.queryParams, this.dateRange, this.entryRange)).then((response) => {
        this.baseList = response.rows
        this.total = response.total
      })
    },
    /** 查询按钮操作 */
    handleQuery () {
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.getList()
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = []
      this.entryRange = []
      this.resetForm("queryForm")
      this.handleQuery()
    },
    addParameter (params, dateRange, entryRange) {
      var search = params
      search.registrationStartTime = ""
      search.registrationEndTime = ""
      if (null != dateRange && '' != dateRange) {
        search.registrationStartTime = dateRange[0]
        search.registrationEndTime = dateRange[1]
      }
      search.entryStartDate = ""
      search.entryEndDate = ""
      if (null != entryRange && '' != entryRange) {
        search.entryStartDate = entryRange[0]
        search.entryEndDate = entryRange[1]
      }

      return search
    },

    handleClick (row) {
      getLrpData({ barcodeCode: row.barcodeCode }).then(response => {
        this.lrpForm = response.data[0]
      })
      this.baseForm = row
      this.changeId = row.id
    },
    handleSelectionChange () {

    },
    transfer () {
      this.baseForm = this.lrpForm
    },
    confirm () {
      if(this.addShow==false){
        this.submit()
      }else{
        if (this.lrpForm === this.baseForm) {
        lrpCompare({ id: this.changeId }).then(response => {
          this.msgSuccess("对照成功")
          this.baseForm = {}
          this.lrpForm = {}
          this.getList()
        })
      } else {
        this.msgError("请先进行对照")
      }
      }
      
    }

  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px !important;
}

.packages {
  position: relative;
  padding-left: 10px;
  // margin-top: 10px;
  background-color: #fff;
  overflow-y: auto;

  .container {
    // border: 1px solid rgb(220, 223, 230);
    // border-radius: 4px;
    display: flex;
    justify-content: space-around;

    .aside2 {
      // border: 1px solid rgb(220, 223, 230);
      padding-top: 15px;
      box-sizing: border-box;
    }

    .main2 {
      padding-top: 15px;
      // flex: 1;
      // border-left: 1px solid rgb(220, 223, 230);
      // border: 1px solid rgb(220, 223, 230);
      box-sizing: border-box;
    }

    .middle {
      // line-height: 200%;
      display: flex;
      align-items: center;
      margin-left: 10px;
      margin-right: 10px;
    }
  }

  .vp-tite {
    color: #333;
    height: 35px;
    border-bottom: 1px solid #eff1f3;
  }
}

::v-deep .el-table__body tr.current-row>td {

  background: #a8d6fe !important;
}


::v-deep .el-table__body tr:hover>td {
  background: #a8d6fe !important;
}

.paginationClass {
  width: 100%;
  height: 70px;
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  bottom: 0;
  right: 20px;
  z-index: 99;
}
.topDiv{
      
      ::v-deep .el-form-item__label {
      font-size:  12px;
      padding:0 5px 0 0 ;
    margin:0;
   
    }
    
    }
</style>
